<template>
    <div>
        <ul>
            <!-- <li @click="changePage('login')">登陆</li>
            <li @click="changePage('home')">首页</li>
            <li @click="changePage('user')">用户</li> -->
            <li v-for="item in tabList" :key="item.pageName" @click="changePage(item.pageName)">{{item.label}}</li>
        </ul>
        <hr>
        <!-- <login v-if="pageName === 'login'"/>
        <home v-else-if="pageName === 'home'"/>
        <user v-else/> -->
        <component :is="pageName"/>
    </div>
</template>

<script>
    import Login from './login'
    import Home from './home'
    import User from './user'

    export default {
        components:{
            Login,
            Home,
            User
        },
        data(){
            return{
                tabList:[
                    {label:'登陆',pageName:'login'},
                    {label:'首页',pageName:'home'},
                    {label:'用户',pageName:'user'}
                ],
                pageName:"login"
            }
        },
        methods:{
            changePage(pageName){
                this.pageName = pageName;
            }
        }
    }
</script>

<style scoped>
    ul{
        list-style: none;
    }
    ul>li{
        float: left;
        margin:10px;
    }
    hr{
        clear: both;
    }
</style>